<template>
  <section class="padding">
    <el-card class="box-card">
      <el-form
        :inline="true"
        :model="searchCriteria"
        class="form-inline padding-top-sm flex align-center justify-between"
        size="mini"
      >
        <el-form-item label="运单号">
          <el-input v-model="searchCriteria.waybillNo" placeholder="运单号" />
        </el-form-item>
        <el-form-item label="主单号">
          <el-input v-model="searchCriteria.masterNo" placeholder="主单号" />
        </el-form-item>
        <!-- <el-form-item label="订单状态">
          <el-select v-model="searchCriteria.status" filterable placeholder="订单状态">
            <el-option :label="$t('waybill.'+item)" :value="val" v-for="(item,val) in publicData.waybillStatusMap" :key="val" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="销售">
          <el-select
            v-model="searchCriteria.salesmanId"
            filterable
            placeholder="搜索"
          >
            <el-option
              v-for="(item, val) in publicData.userAll"
              :key="val"
              :label="item"
              :value="val"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="客服">
          <el-select
            v-model="searchCriteria.servicesId"
            filterable
            placeholder="搜索"
          >
            <el-option
              v-for="(item, val) in publicData.userAll"
              :key="val"
              :label="item"
              :value="val"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="margin-top">
      <div class=" padding-bottom-sm">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[20, 40, 60, 80, 100]"
          :page-size="pageSize"
          layout="prev, pager, next, jumper, sizes,total"
          :total="pageTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <TableModule
        :table-columns="tableColumns"
        :table-data="tableData"
        :table-operation="tableOperation"
        @clickOperation="operationList"
      />
    </el-card>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
import TableModule from '@/components/TableModule'
import {
  abroadWaybillList,
  confirmAbroadWaybill,
  deleteAbroadWaybillById
} from '@/api/abroadWaybill'

export default {
  name: 'PendingWaybill',
  components: {
    TableModule
  },

  data() {
    return {
      currentPage: 1,
      pageSize: 20,
      pageTotal: 0,
      searchCriteria: {
        waybillNo: '',
        masterNo: '',
        status: [10],
        servicesId: '',
        salesmanId: ''
      },
      tableColumns: [
        { prop: 'waybillNo', label: '运单号' },
        { prop: 'masterNo', label: '主单号' },
        { prop: 'customerShortName', label: '公司名称' },
        { prop: 'countryName', label: '退货国家' },
        { prop: 'serviceItemName', label: '服务项目' },
        { prop: 'salesmanName', label: '销售' },
        { prop: 'servicesName', label: '客服' },
        { prop: 'cuserName', label: '创建人' },
        { prop: 'cdate', label: '创建时间' },
        { prop: 'returnBatchIndexName', label: '退货批次' }
      ],
      tableData: [],
      tableOperation: [
        {
          name: 'question',
          tips: '账单状态,灰色未出账，绿色已出账',
          type: 'img',
          show: ['all']
        },
        {
          name: 'edit-outline',
          tips: '编辑',
          type: 'i',
          show: [10]
        },
        {
          name: 's-home',
          tips: '没有对应的联系信息',
          type: 'i',
          show: ['all'],
          isColor: true
        },
        {
          name: 'check',
          tips: '确认订单',
          type: 'i',
          show: [10]
        },
        {
          name: 'close',
          tips: '删除',
          type: 'i',
          show: [10]
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['publicData'])
  },
  mounted() {
    this.queryList()
    this.$store.dispatch('app/toggleDialog', true)
  },
  methods: {
    async queryList() {
      this.searchCriteria.pageSize = this.pageSize
      this.searchCriteria.currentPage = this.currentPage
      const list = await abroadWaybillList(this.searchCriteria)
      // console.log("list",list);
      this.tableData = list.datas
      this.pageTotal = list.count

      const statusMap = this.publicData.abroadWaybillStatusMap
      const userMap = this.publicData.userAll
      const customerMap = this.publicData.customerAll
      const customerNameShortMap = this.publicData.customerNameShortMap
      const countryMap = this.publicData.countryMap
      const serviceItemMap = this.publicData.serviceItemMap

      for (const data of this.tableData) {
        if (data.status) {
          data.statusName = statusMap[data.status]
        }
        if (data.salesmanId) {
          data.salesmanName = userMap[data.salesmanId]
        }

        if (data.servicesId) {
          data.servicesName = userMap[data.servicesId]
        }

        if (data.cuser) {
          data.cuserName = customerMap[data.cuser]
        }

        if (data.customerId) {
          data.customerShortName = customerNameShortMap[data.customerId]
        }

        if (data.returnCountry) {
          data.countryName = countryMap[data.returnCountry]
        }

        if (data.serviceItem) {
          data.serviceItemName = serviceItemMap[data.serviceItem]
        }

        data.returnBatchIndexName = `第${data.returnBatchIndex || 0}批`
      }

      this.$store.dispatch('app/toggleDialog', false)
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.$store.dispatch('app/toggleDialog', true)
      this.pageSize = val
      this.queryList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.$store.dispatch('app/toggleDialog', true)
      this.currentPage = val
      this.queryList()
    },
    onSubmit() {
      this.$store.dispatch('app/toggleDialog', true)
      this.currentPage = 1
      this.queryList()
    },
    onReset() {
      this.$store.dispatch('app/toggleDialog', true)
      this.currentPage = 1
      this.searchCriteria = {
        waybillNo: '',
        masterNumber: '',
        status: [10],
        servicesId: '',
        salesmanId: ''
      }
      this.queryList()
    },

    //  操作判断
    async operationList(data, name, index) {
      switch (name.name) {
        case 'question':
          console.log('data :>> ', data)
          //  this.$router.push({
          //    name: 'abroadWaybillEdit',
          //    params: { wId: data.id }
          //  })
          break
        case 'edit-outline':
          console.log('data :>> ', data)
          this.$router.push({
            name: 'AbroadWaybillEdit',
            params: { waybillId: data.id }
          })
          break
        case 'check':
          this.$confirm('确认当前运单？')
            .then(_ => {
              this.colCheck(data)
            })
            .catch(_ => {})
          break
        case 'close':
          this.$confirm('删除当前运单？')
            .then(_ => {
              this.colDel(data.id)
            })
            .catch(_ => {})
          break
      }
    },
    async colDel(id) {
      this.$store.dispatch('app/toggleDialog', true)
      const res = await deleteAbroadWaybillById({
        id: id
      })
      this.result(res)
    },
    async colCheck(data) {
      this.$store.dispatch('app/toggleDialog', true)
      const res = await confirmAbroadWaybill({
        id: data.id,
        status: data.statusCode
      })
      this.result(res)
    },
    result(res) {
      if (res.code === 200) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.queryList()
      } else {
        this.$message.error('操作失败')
        this.$store.dispatch('app/toggleDialog', false)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col {
  border-radius: 4px;
}

.pan-btn {
  font-size: 12px;
  //  color: #fff;
  width: 100%;
  text-align: center;
  color: #337ab7;
  padding: 14px 0;
  border-radius: 8px;
  border: none;
  outline: none;
  transition: 600ms ease all;
  position: relative;
  display: inline-block;
  cursor: pointer;

  &:hover {
    color: #30b08f;
    //  background: #ccc;

    &:before,
    &:after {
      background: #30b08f;
      width: 100%;
      transition: 600ms ease all;
    }
  }

  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 2px;
    width: 0;
    transition: 400ms ease all;
  }

  &::after {
    right: inherit;
    top: inherit;
    left: 0;
    bottom: 0;
  }
}
.financial-title {
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  text-align: center;
}

.financial-title-money {
  color: #666;
  font-size: 20px;
  text-align: center;
}

.shadow {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.form-inline {
  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 8px;
  }
}
</style>
<style lang="scss">
.table-box th {
  padding: 2px 0;
}
</style>
